<template>
	<view>
		<view>
			<view class="cont-head">
				<view class="cont-box">
					<text>单位名称</text>
					<input v-model="invoiceInfo.company_name" placeholder="请填写单位名称" placeholder-style="font-size: 28rpx; color: #c0c0c0;"/>
				</view>
				<image v-show="invoiceInfo.company_name" @click="invoiceInfo.company_name = ''"
					src="../../static/my/add_close.png" mode=""></image>
			</view>
			<u-divider hairline></u-divider>
			<view class="cont-head">
				<view class="cont-box">
					<text>纳税识别码</text>
					<input  v-model="invoiceInfo.taxcode" maxlength="18" placeholder="纳税人识别码" placeholder-style="font-size: 28rpx; color: #c0c0c0;"/>
				</view>
				<image v-show="invoiceInfo.taxcode" @click="invoiceInfo.taxcode = ''"
					src="../../static/my/add_close.png" mode=""></image>
			</view>
			<u-divider hairline></u-divider>
			<view class="cont-head">
				<view class="cont-box">
					<text>注册地址</text>
					<input v-model="invoiceInfo.address" placeholder="注册地址" placeholder-style="font-size: 28rpx; color: #c0c0c0;"/>
				</view>
				<image v-show="invoiceInfo.address" @click="invoiceInfo.address = ''"
					src="../../static/my/add_close.png" mode=""></image>
			</view>
			<u-divider hairline></u-divider>
			<view class="cont-head">
				<view class="cont-box">
					<text>注册电话</text>
					<input v-model="invoiceInfo.telphone" maxlength="11" placeholder="注册电话" placeholder-style="font-size: 28rpx; color: #c0c0c0;"/>
				</view>
				<image v-show="invoiceInfo.telphone" @click="invoiceInfo.telphone = ''"
					src="../../static/my/add_close.png" mode=""></image>
			</view>
			<u-divider hairline></u-divider>
			<view class="cont-head">
				<view class="cont-box">
					<text>开户银行</text>
					<input v-model="invoiceInfo.bankname"  placeholder="开户银行" placeholder-style="font-size: 28rpx; color: #c0c0c0;"/>
				</view>
				<image v-show="invoiceInfo.bankname" @click="invoiceInfo.bankname = ''"
					src="../../static/my/add_close.png" mode=""></image>
			</view>
			<u-divider hairline></u-divider>
			<view class="cont-head">
				<view class="cont-box">
					<text>银行账户</text>
					<input v-model="invoiceInfo.bankno" maxlength="18" placeholder="银行账户" placeholder-style="font-size: 28rpx; color: #c0c0c0;"/>
				</view>
				<image v-show="invoiceInfo.bankno" @click="invoiceInfo.bankno = ''"
					src="../../static/my/add_close.png" mode=""></image>
			</view>
			<u-divider hairline></u-divider>
			<view class="cont-head">
				<view class="cont-box">
					<text>发票类型</text>
					<input  v-model="invoiceInfo.type"  @click="showInvoice = true" disabled placeholder="发票类型" placeholder-style="font-size: 28rpx; color: #c0c0c0;"/>
					
				</view>
			</view>
			<u-divider hairline></u-divider>
			
			<view class="bot-btn">
				<view class="btn-box" style="border: 2rpx solid #f18b49; background: #FFFFFF; color: #f18b49;"
					@click="delInvoice()">删除抬头
				</view>
				<view class="btn-box" @click="saveInvoiceInfo()">保存</view>
			</view>
			<u-picker :show="showInvoice" :columns="columnInvoice" keyName="label" @change="changeHandler" closeOnClickOverlay
				@close="showInvoice = false" @cancel="showInvoice = false" @confirm="confirmArea" confirmColor="#f18b49"></u-picker>
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			// company_name:单位名称 taxcode:纳税人识别码 address:注册地址 
			// telphone:注册电话 bankname:开户银行 bankno:银行账户 type:1代表普通发票2代表增值税专用发票

			return {
				id:'',//发票id
				user_id:'',
				company_name:'',
				taxcode:'',
				address:'',
				telphone:'',
				bankname:'',
				bankno:'',
				type:2,
				showInvoice:false,//展示 选择开票抬头
				invoiceInfo:{},
				columnInvoice:[{
						label: '请选择开票抬头',
						type: '0'
					},{
						label:'代表普通发票',
						type:'1'
					},{
						label:'代表增值税专用发票',
						type:'2'
					}],//选择开票抬头
			}
		},
		onLoad(e){
			this.user_id = e.user_id
			this.id = e.id
	
		},
		async onShow(){
			this.getInvoiceInfo()
		},
		methods: {
			uniShowToast(tit) {
				uni.showToast({
					title: tit,
					duration: 1500,
					icon: 'none'
				})
			},
			
			//获取发票信息
			getInvoiceInfo(){
				this.$getHttp(`/gjcApi/invoice?id=${this.id}&user_id=${this.user_id}`,{},res=>{
					if(res.code == 200){
						console.log(res.data)
						this.invoiceInfo = res.data
					}
					
				})
			},
			
			//删除抬头
			delInvoice(){
				var that = this
				uni.showModal({
					title:'温馨提示',
					cancelText: '取消',
					cancelColor: '#f18b49',
					confirmText: '确定',
					confirmColor: '#000',
					content:'是否删除此抬头？',
					success:function(res){
						if(res.confirm){
							that.$getHttp('/gjcApi/invoice_del?id='+that.id+'&user_id='+that.user_id,{},res=>{
								if(res.code == 200){
									uni.showToast({
										tit:res.msg,
										duration:1500,
										icon:'success'
									})
									setTimeout(() => {
										uni.hideToast()
										uni.navigateBack({
											delta: 1
										})
									}, 1000)
								}
							})
							
						}
					}
				})
				
			},
			
			//保存
			saveInvoiceInfo(){
				let mobReg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if(this.company_name == ''){
					this.uniShowToast('请填写单位名称')
				} else if(this.taxcode == ''){
					this.uniShowToast('请填写纳税人识别码')
				}else if(this.address == ''){
					this.uniShowToast('请填写注册地址')
				}else if(this.telphone == ''){
					this.uniShowToast('请填写注册电话')
				}else if(this.bankname == ''){
					this.uniShowToast('请填写开户银行')
				}else if(this.bankno == ''){
					this.uniShowToast('请填写银行账户')
				}else if(this.type == 0){
					this.uniShowToast('请选择开票类型')
				}else if(mobReg.test(this.telphone)  == false){
					this.uniShowToast('输入的手机号格式有误')
				}else{
					this.$http(`/gjcApi/invoice_add`,{
						user_id:this.user_id,
						company_name:this.company_name,
						taxcode:this.taxcode,
						address:this.address,
						telphone:this.telphone,
						bankname:this.bankname,
						bankno:this.bankno,
						type:this.type
					},res=>{
							if(res.code == 200){
								uni.showToast({
									title:res.msg,
									duration:2000,
									icon:'success'
								})
								console.log(this.user_id)
								uni.navigateTo({
									url: '/pages/invoice/show-invoice?userId=' + this.user_id,
									
								})
							}
							if(res.code == 403){
								uni.showToast({
									title:res.msg,
									duration:1500,
									icon:'error'
								})
							}
					})
				}
			},
			//选择发票类型
			changeHandler(e){
				switch(e.columnIndex){
					case 0:
						this.columnAreas.splice(e.columnIndex + 1, 1, {
							label: '请选择',
							type: '0'
						})
						
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
page{
	background: $uni-model-color;
}
.cont-head{
	display: flex;
	padding: 30rpx;
	align-items: center;
	justify-content: space-between;
	.cont-box{
		display: flex;
		text{
			width: 160rpx;
			font-size: 30rpx;
		}
	}
	image{
		width: 40rpx;
		height: 40rpx;
	}
}
.u-divider{
	margin: 0;
}
	.bot-btn {
		display: flex;
		bottom: 0;
		width: 750rpx;
		position: fixed;
		padding: 20rpx 0;
		text-align: center;

		.btn-box {
			width: 300rpx;
			color: #FFFFFF;
			padding: 20rpx 0;
			margin-left: 50rpx;
			font-size: 28rpx;
			background: #ff914d;
			letter-spacing: 2rpx;
			border-radius: 50rpx;
			text {
				margin-left: 4rpx;
			}
		}
	}
</style>